<template>
  <div style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
    <el-form
        class="detail-form-content"
        label-position="left"
        ref="ruleForm"
        :model="ruleForm"
        label-width="70px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item v-if="flag=='student1'" label="头像" prop="touxiang">
            <file-upload
                tip="点击上传头像"
                action="file/upload"
                :limit="3"
                :multiple="true"
                :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
                @change="studenttouxiangUploadChange"
            ></file-upload>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item v-if="flag==='student'" label="学号" prop="useraccount">
            <el-input v-model="localruleForm.useraccount" readonly placeholder="学号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item v-if="flag==='student'" label="学生姓名" prop="username">
            <el-input v-model="localruleForm.username" readonly placeholder="学生姓名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item v-if="flag==='student'" label="班级" prop="userClass">
            <el-input v-model="localruleForm.userClass" readonly placeholder="班级">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item v-if="flag==='student'" label="学院" prop="userCollege">
            <el-input v-model="localruleForm.userCollege" readonly placeholder="学院">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item v-if="flag ==='mentor'" label="工号" prop="useraccount">
            <el-input v-model="localruleForm.useraccount" readonly placeholder="工号" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag ==='mentor'" label="教师姓名" prop="username">
            <el-input v-model="localruleForm.username" placeholder="教师姓名" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="flag ==='mentor'" label="性别" prop="gender">
            <el-input v-model="localruleForm.gender" placeholder="性别">

            </el-input>
          </el-form-item>
        </el-col>

<!--        <el-col :span="24">-->
<!--          <el-form-item v-if="flag==='admin'" label="头像" prop="touxiang">-->
<!--            <file-upload-->
<!--                tip="点击上传头像"-->
<!--                action="file/upload"-->
<!--                :limit="3"-->
<!--                :multiple="true"-->
<!--                :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"-->
<!--                @change="studenttouxiangUploadChange"-->
<!--            ></file-upload>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

        <el-form-item v-if="flag=='admin'" label="用户名" prop="username">
          <el-input v-model="localruleForm.username" :placeholder="localruleForm.username"></el-input>
        </el-form-item>
        <el-form-item v-if="flag=='admin'" label="密码" prop="username">
          <el-input v-model="ruleForm.password" :placeholder="ruleForm.password"></el-input>
        </el-form-item>
        <!--        <el-form-item>-->
        <!--          <el-button type="primary" @click="onUpdateHandler">修 改</el-button>-->
        <!--        </el-form-item>-->
      </el-row>
    </el-form>
  </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import {isNumber, isIntNumer, isEmail, isMobile, isPhone, isURL, checkIdCard} from "@/utils/validate";
import {getRole, getTokenRole} from "@/utils/getrole";
import methods from "methods";

export default {
  data() {
    return {
      avatarUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      localruleForm: {
        username: '1',
        useravator: '',
        useraccount: '',
        userClass: '',
        userCollege: '',
        gender: '',
      },
      ruleForm: {
        password: ""
      },
      role: '',
      flag: '',
      adminFlag: false,
      studentxingbieOptions: [],
      mentorxingbieOptions: [],
    };
  },
  mounted() {
    getRole().then(role => {
      this.flag = role
      this.loadUserData()
      this.studentxingbieOptions = "男,女".split(',')
      this.mentorxingbieOptions = "男,女".split(',')
    }).catch(error => {
      this.$message.error(error.message)
    })
  },
  methods: {
    async loadUserData() {
      try {
        const userData = await getTokenRole(this.flag)
        this.localruleForm.username = userData.username;
        this.localruleForm.useravator = userData.useravator;
        this.localruleForm.useraccount = userData.account;
        this.localruleForm.gender = userData.gender;
        this.ruleForm.password = userData.password;
        this.localruleForm.userClass = userData.classroom
        this.localruleForm.userCollege = userData.college
      } catch (error) {
        console.error("Error loading user data:", error);
      }
    },

    onAvatarError() {
      // 当头像加载失败时，将 avatarUrl 设置为空字符串，使用默认 icon
      this.avatarUrl = '';
    },
    studenttouxiangUploadChange(fileUrls) {
      this.ruleForm.touxiang = fileUrls;
    },
    mentortouxiangUploadChange(fileUrls) {
      this.ruleForm.touxiang = fileUrls;
    },
    onUpdateHandler() {
      if ((!this.ruleForm.studentaccount) && 'student' == this.flag) {
        this.$message.error('学号不能为空');
        return
      }
      if ((!this.ruleForm.studentpassword) && 'student' == this.flag) {
        this.$message.error('密码不能为空');
        return
      }
      if ('student' == this.flag && this.ruleForm.shouji && (!isMobile(this.ruleForm.shouji))) {
        this.$message.error(`手机应输入手机格式`);
        return
      }
      if ('student' == this.flag && this.ruleForm.youxiang && (!isEmail(this.ruleForm.youxiang))) {
        this.$message.error(`邮箱应输入邮箱格式`);
        return
      }
      if ((!this.ruleForm.mentoraccount) && 'mentor' == this.flag) {
        this.$message.error('工号不能为空');
        return
      }
      if ((!this.ruleForm.mentorpassword) && 'mentor' == this.flag) {
        this.$message.error('密码不能为空');
        return
      }
      if ('mentor' == this.flag && this.ruleForm.youxiang && (!isEmail(this.ruleForm.youxiang))) {
        this.$message.error(`邮箱应输入邮箱格式`);
        return
      }
      if ('mentor' == this.flag && this.ruleForm.dianhua && (!isMobile(this.ruleForm.dianhua))) {
        this.$message.error(`电话应输入手机格式`);
        return
      }
      if ('admin' == this.flag && this.localruleForm.username.trim().length < 1) {
        this.$message.error(`用户名不能为空`);
        return
      }
      const requestData = {
        ...this.localruleForm,
        ...this.ruleForm
      }
      this.$http({
        url: `${this.flag}/update`,
        method: "post",
        data: requestData
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: "修改信息成功",
            type: "success",
            duration: 1500,
            onClose: () => {
            }
          });
        } else {
          this.$message.error(data.msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-col{
  margin-right: 8% !important;
}

</style>
